<template>
  <h1>{{ title }}</h1>
  <BookList :books="books" />
</template>

<script setup>
import BookList from "@components/book/BookList.vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { ref, watch, watchEffect } from "vue";

const route = useRoute();
const title = ref(route.meta.title);

// watchEffect(() => {
//   title.value = route.meta.title;
// });

watch(
  () => route.fullPath,
  (value) => {
    console.log("发生了改变", route);
    title.value = route.meta.title;
  }
);

// 监听路由变化
// onBeforeRouteUpdate((to, from, next) => {
//   title.value = to.meta.title;
//   next();
// });

const books = [
  {
    name: "西游记",
    price: 4500,
    oldPrice: 5000,
    img: "/book/huozhe.jpg",
  },
  {
    name: "红楼梦",
    price: 6500,
    oldPrice: 7000,
    img: "/book/huozhe.jpg",
  },
  {
    name: "三国演义",
    price: 3500,
    oldPrice: 5000,
    img: "/book/huozhe.jpg",
  },
  {
    name: "水浒传",
    price: 3500,
    oldPrice: 5000,
    img: "/book/huozhe.jpg",
  },
];
</script>
